<template>
  <el-container>
    <el-aside style="width:610px">
      <el-table
        class="studentTable"
        :data="studentData"
        height="100%"
        border
        :header-cell-style="{ background: '#5988B3', color: '#F2F2F2', padding:'0', height:'30px',fontSize:'12px',textAlign:'center',fontWeight:'700'}"
        :highlight-current-row="true"
        :cell-style="{ padding: '0px',textAlign:'center',fontSize:'12px',height: '30px', color:'#333333'}"
        :row-style="{ height: '25px', padding: '0px'}"
        @row-click="chooseOne"
        ref="multipleTable"
      >
        <el-table-column prop="studentId" label="学号" :resizable="false" width="130"></el-table-column>
        <el-table-column prop="name" label="姓名" :resizable="false" width="90"></el-table-column>
        <el-table-column prop="departmentName" label="所属院系" :resizable="false" width="100"></el-table-column>
        <el-table-column prop="majorName" label="所属专业" :resizable="false" width="100"></el-table-column>
        <el-table-column prop="enrollmentYear" label="所在年级" :resizable="false" width="90"></el-table-column>
        <el-table-column prop="className" label="所在班级" :resizable="false"></el-table-column>
      </el-table>
    </el-aside>
    <el-main style="padding:0;">
      <el-container>
        <el-header height="180px" style="padding:10px 20px">
          <el-form label-width="70px" style="margin-top:5px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="学号">
                  <el-input
                    size="small"
                    v-model="currentStudent.studentId"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" style="margin-left:10px">
                  <el-input
                    size="small"
                    v-model="currentStudent.name"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属学院">
                  <el-input
                    size="small"
                    v-model="currentStudent.departmentName"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属专业" style="margin-left:10px">
                  <el-input
                    size="small"
                    v-model="currentStudent.majorName"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="班级">
                  <el-input
                    size="small"
                    v-model="currentStudent.className"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年级" style="margin-left:10px">
                  <el-input
                    size="small"
                    v-model="currentStudent.enrollmentYear"
                    :readonly="true"
                    class="input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-divider></el-divider>
        <el-main style="width:100%;height:100%; padding:10px 20px">
          <el-table
            class="submitTable"
            :data="homework"
            height="410px"
            border
            :header-cell-style="{ background: '#5988B3', color: '#F2F2F2', padding:'0', height:'30px',fontSize:'12px',textAlign:'center',fontWeight:'700'}"
            :cell-style="{ padding: '0px',textAlign:'center',fontSize:'12px',height: '30px', color:'#333333'}"
            :row-style="{ height: '25px', padding: '0px'}"
          >
            <el-table-column prop="homeworkTitle" label="课程作业名称" :resizable="false" width="154"></el-table-column>
            <el-table-column prop="isCheck" label="提交情况" :resizable="false" width="85"></el-table-column>
            <el-table-column prop="score" label="分数" :resizable="false" width="80"></el-table-column>
            <el-table-column prop="publishTime" label="作业发布日期" :resizable="false" width="140"></el-table-column>
            <el-table-column prop="deadline" label="作业截止日期" :resizable="false"></el-table-column>
          </el-table>
          <a
            style="margin-top:17px;float:right;font-size:17px; color: rgb(12, 76, 142)"
            @click="back"
          >返回上一级</a>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      studentData: [
        {
          studentId: "201830670001",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670002",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670003",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670004",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670005",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670006",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670007",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670008",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670009",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670010",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201830670011",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700012",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700013",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700014",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700015",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700016",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700017",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700018",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700019",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700020",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700021",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "2018306700022",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "20183067000",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        },
        {
          studentId: "201806700022",
          name: "陈一鸣",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2019",
          className: "卓越二班"
        }
      ],
      currentStudent: {
        studentId: "",
        name: "",
        departmentName: "",
        majorName: "",
        enrollmentYear: "",
        className: ""
      },
      homework: [
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        },
        {
          homeworkTitle: "第十章作业",
          homeworkTitle: "填空题：第3题",
          deadline: "2020-12-11 21:36:00",
          publishTime: "2020-11-18 17:52:42",
          score: null,
          isCheck: "未批改"
        }
      ]
    };
  },
  methods: {
    // 某一行被选中后
    chooseOne(row, event, column) {
      // row里面点击一行中的信息
      console.log(row);
      this.currentStudent.studentId = row.studentId;
      this.currentStudent.name = row.name;
      this.currentStudent.departmentName = row.departmentName;
      this.currentStudent.majorName = row.majorName;
      this.currentStudent.enrollmentYear = row.enrollmentYear;
      this.currentStudent.className = row.className;
    },
    back() {
      this.$router.push("/teacher/courseMangement/homeworkHome");
    }
  },
  mounted() {
    // 设置默认选中第一行
    this.$refs.multipleTable.setCurrentRow(this.studentData[0], true);
    this.currentStudent.studentId = this.studentData[0].studentId;
    this.currentStudent.name = this.studentData[0].name;
    this.currentStudent.departmentName = this.studentData[0].departmentName;
    this.currentStudent.majorName = this.studentData[0].majorName;
    this.currentStudent.enrollmentYear = this.studentData[0].enrollmentYear;
    this.currentStudent.className = this.studentData[0].className;
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-input--small .el-input__inner {
  border-radius: 0;
  border: 1px solid #333333;
  color: #333333;
  height: 27px;
  font-size: 13px;
  width: 200px;
}

/deep/ .el-form-item__label {
  font-size: 14px;
  color: #333333;
  text-align: left;
}

.el-col-12 {
  height: 50px;
}

.el-divider {
  height: 2px;
  width: 90%;
  margin: auto;
}
</style>
